<template>
  <div class="item-style">
    <el-row :gutter="8" type="flex" align="middle">
      <el-col
        :span="8"
        class="col-item name-item col-item-name"
        :style="tagPaddingLeftStyle"
      >
        <el-row type="flex" justify="space-around" align="middle">
          <el-col :span="2" class="down-style-col">
            <span
              v-if="value.type === 'object'"
              class="down-style"
              @click="handleClickIcon"
            >
              <i v-if="showIcon" class="el-icon-caret-bottom icon-object"></i>
              <i v-if="!showIcon" class="el-icon-caret-right icon-object"></i>
            </span>
          </el-col>
          <el-col :span="20" class="el-input--small">
            <input
              v-if="!value.disabled && !disabled"
              class="el-input el-input__inner"
              placeholder="参数名称"
              :value="name"
              :disabled="value.disabled || disabled"
              @change="handleNameChange"
            />
            <el-input
              v-else
              :model-value="name"
              disabled
            />
          </el-col>
          <el-col :span="2" style="text-align: center">
            <el-tooltip placement="top" content="是否必须">
              <el-checkbox
                :model-value="
                  data.required ? data.required.includes(name) : false
                "
                :disabled="value.disabled || disabled"
                @change="handleEnableRequire"
              ></el-checkbox>
            </el-tooltip>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="3" class="col-item col-item-type">
        <el-select
          size="small"
          :modelValue="value.type"
          :disabled="value.disabled || disabled"
          class="type-select-style"
          @change="handleChangeType"
        >
          <el-option
            v-for="item in schemaTypes"
            :key="item"
            :value="item"
            :label="item"
          ></el-option>
        </el-select>
      </el-col>

      <!-- 默认值输入框 -->
      <el-col
        v-if="schemaConfig.showDefaultValue"
        :span="5"
        class="col-item"
      >
        <el-input
          v-model.trim="value.default"
          placeholder="默认值"
          size="small"
          :disabled="
            value.type === 'object' || value.type === 'array' || (value.disabled || disabled)
          "
        >
        </el-input>
      </el-col>
      <!-- 描述示例输入框 -->
      <el-col :span="5" class="col-item col-item-desc" v-if="schemaConfig.showDescrption">
        <el-input
          v-model="value.description"
          :disabled="value.disabled || disabled"
          size="small"
          placeholder="描述"
        >
        </el-input>
      </el-col>

      <!-- 操作按钮 -->
      <el-col :span="3" class="col-item col-item-setting" v-if="schemaConfig.showBtn">
        <el-button
          type="text"
          :disabled="disabled"
          @click="
            handleAction({ eventType: 'setting', schemaType: value.type })
          "
        >
          <span class="adv-set">
            <el-tooltip placement="top" content="高级设置">
              <i class="el-icon-setting"></i>
            </el-tooltip>
          </span>
        </el-button>
        <!-- prefix.length === 1：首层节点,首层节点隐藏删除按钮 -->
        <el-button
          v-if="prefix.length !== 1"
          type="text"
          :disabled="disabled"
          @click="handleAction({ eventType: 'delete-field' })"
        >
          <span class="delete-item">
            <el-tooltip placement="top" content="删除节点">
            <i class="el-icon-close close"></i>
            </el-tooltip>
          </span>
        </el-button>
        <!-- prefix.length === 1：首层节点,首层节点是对象类型 -->
        <el-button
          v-if="value.type == 'object' && prefix.length === 1"
          type="text"
          :disabled="disabled"
          @click="handleAction({ eventType: 'add-field', isChild: true })"
        >
          <span>
            <el-tooltip placement="top" content="添加子节点">
              <i class="el-icon-plus plus"></i>
            </el-tooltip>
          </span>
        </el-button>
        <DropPlus
          v-if="value.type === 'object' && prefix.length !== 1"
          :prefix="prefix"
          :name="name"
          :disabled="disabled"
          @addField="handleAction"
        />
        <el-button
          v-if="value.type !== 'object'"
          type="text"
          :disabled="disabled"
          @click="handleAction({ eventType: 'add-field', isChild: false })"
        >
          <span>
            <el-tooltip placement="top" content="添加兄弟节点">
              <i class="el-icon-plus plus"></i>
            </el-tooltip>
          </span>
        </el-button>
      </el-col>
    </el-row>
    <div class="option-formStyle" :style="{ paddingLeft: schemaConfig.indent }">
      <template v-if="value.type === 'array'">
        <schema-array
          :prefix="prefixArray"
          :data="value"
          :editor-id="editorId"
          :disabled="disabled"
        />
      </template>
      <template v-if="value.type === 'object' && showIcon">
        <schema-object
          :prefix="nameArray"
          :data="value"
          :editor-id="editorId"
          :disabled="disabled"
        />
      </template>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, getCurrentInstance, reactive, toRefs, inject } from 'vue';
import DropPlus from './DropPlus.vue';
import SchemaObject from './SchemaObject.vue';
import SchemaArray from './SchemaArray.vue';
import { SCHEMA_TYPE, flat } from '../helper/utils';

export default defineComponent({
  name: 'SchemaItem',
  components: {
    DropPlus,
    'schema-array': SchemaArray,
    'schema-object': SchemaObject,
  },
  props: {
    // 字段名称
    name: {
      type: String,
      default: '',
    },
    // 字段父级路径数组
    prefix: {
      type: Array,
      default: () => [],
    },
    // 字段数据对象
    data: {
      type: Object,
      default: () => {},
    },
    editorId: {
      type: String,
      default: 'editor_id',
    },
    // 禁用
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const state = reactive({
      showIcon: true,
      tagPaddingLeftStyle: {},
      schemaTypes: SCHEMA_TYPE,
      value: props.data.properties[props.name],
    });

    const nameArray = computed(() => {
      const prefixArray = [].concat(props.prefix, props.name);
      return [].concat(prefixArray, 'properties');
    });

    const prefixArray = computed(() => {
      return [].concat(props.prefix, props.name)
    });
    
    const handleClickIcon = () => {
      state.showIcon = !state.showIcon
    };

    const { proxy } = getCurrentInstance();
    const handleAction = (options) => {
      const { prefix, name } = props;
			proxy.mittBus.emit(`schema-update-${props.editorId}`, {
        eventType: 'add-field',
        prefix: flat(prefix),
        name,
        ...options,
      });
    }

    const handleNameChange = (e) => {
      handleAction({
        eventType: 'update-field-name',
        value: e.target.value,
      })
    };

    const handleEnableRequire = (e) => {
      handleAction({
        eventType: 'toggle-required',
        required: e,
      })
    };

    const handleChangeType = (value) => {
      handleAction({ eventType: 'schema-type', value })
    };

    // schema配置
    const schemaConfig = inject('schemaConfig');
    return {
      ...toRefs(state),
      nameArray,
      prefixArray,
      handleClickIcon,
      handleAction,
      handleNameChange,
      handleEnableRequire,
      handleChangeType,
      schemaConfig,
    }
  }

})
</script>

<style scoped>
</style>